<template>
  <div>
    <x-header :left-options="{showBack: true}"  style="" >课前聊天</x-header>
    <div class="chart-box">
      <Scroller height="-90" lock-x  use-pulldown  :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"  ref="chartScroller" @on-pulldown-loading="resetList"  class="sclloretop">
        <div>
        <ul >
          <li v-for="message in messages" class="" v-bind:class="{ 'my-chart' : message.self, 'other-chart':  message.self}">
            <span>{{message.name}}</span>&emsp;<span>{{message.time}}</span>
            <p v-html='message.content'></p>
          </li>
        </ul>
        </div>
      </Scroller>
      <div class="chart-send"><a  @click='showIcon'><i class="iconfont icon-add"></i></a><input type="text" class="sendInput" v-model='mycontent' placeholder="请输入内容" ><a  @click='sendContent'><i class="iconfont icon-send"></i></a>
      <div v-if='iconBox' class="iconBox"><svg v-for='(item, index) in iconList' class='icon' ref='icon' @click='sendIcon(index)' aria-hidden='true'><use  v-bind:xlink:href="'#'+item"></use></svg></div></div>   
    </div>
  </div>
</template>
<script>
  import {Scroller, XHeader, Actionsheet,Group ,Cell } from 'vux';
  import config from '../config.js';
  
 export default {
    data () {
      return {
        messages:[{name:'name1',time:'16:01',content:'content1',self:0},
                  {name:'name2',time:'16:02',content:'content2',self:0},
                  {name:'name3',time:'16:03',content:'content3',self:0}
                  ],
        iconList:['icon--tongue','icon--sweat','icon--sleeping','icon-sad','icon--joy','icon--happy-','icon--flushed',
        'icon--expressionless','icon--cry','icon--dizzy','icon--angry','icon--confused','icon--cool'],
        mycontent:'',
        Y:-20,
        socketRoom:'',
        firstconnet:false,
        iconBox:false
      }
     },
     mounted () {
      this.$nextTick(()=>{
        this.websocketMethods(1,localStorage.user)
        this.$refs.chartScroller.reset({
          top: 0
        })
      })
    },
    methods: {
      resetList () {
        this.$nextTick(() => {
          setTimeout(()=>{
            this.$refs.chartScroller.donePulldown();
            this.$refs.chartScroller.reset();
          }, 1000)
        })
      },
      sendContent(){
        if(this.mycontent!=''){
          this.iconBox=false;
          this.socketRoom.send(this.mycontent);
          this.mycontent='';
          return false;
        }
      },
      showIcon(){
        this.iconBox=!this.iconBox
      },
      sendIcon(index){
        this.iconBox=false;
        this.socketRoom.send(this.$refs.icon[index].outerHTML.replace(/\"/g,'\''));
      },
       scrollBtom(){
          let el=document.querySelector('.xs-container');
          let height=document.getElementsByClassName('xs-container')[0].scrollHeight;
          this.Y=this.Y-10;
          this.$nextTick(()=>{
            this.$refs.chartScroller.reset({
              bottom: 0
            })
          })
          let scroll=window.innerHeight-height-150<0?window.innerHeight-height-180:0;
          el.style.transform='translateY('+scroll+'px)';
          
       },
       websocketMethods (id,name) {
        this.socketRoom = new WebSocket('ws://120.25.145.214/chatroom/chat/'+id+'/'+name);
        
        this.socketRoom.onerror = (event) => {
          this.$vux.toast.show({
            text:'网络出错了！',
            type:'warn'
          })
        };
        this.socketRoom.onopen = (event) => {
          if(this.firstconnet === false) {
            this.$vux.toast.show({
              text:'连接聊天成功！'
            })
            this.firstconnet=true;
          } 
        };
        this.socketRoom.onclose=(event)=>{
          this.websocketMethods(1,localStorage.user)
        }
        this.socketRoom.onmessage=(event)=>{
          let data=JSON.parse(event.data) ;
          data.name===localStorage.user?
          this.messages.push({name:data.name,time:config.changeDate(data.time,2),content:data.content,self:1})
          :
          this.messages.push({name:data.name,time:config.changeDate(data.time,2),content:data.content,self:0})
        }
       }
    },
    watch: {  
        'messages': 'scrollBtom'
      },
      components: {
        XHeader,
        Actionsheet,
        Scroller,
        Group,
        Cell
      },
  }
</script>
<style scoped>
.chart-box{position:relative;}
.chart-box ul li{text-align:left;list-style:none; overflow: auto; zoom: 1;position:relative;}
.chart-box ul {padding:1rem 0.5rem;}
.chart-box ul li::after{content:'';clear:both; height: 0;}
.chart-box ul li span{float:left;color:#629FDE;font-size:1rem;padding-right:5px;display:inline-block;}
.chart-box ul li span+span{width:70%;}
.chart-box ul li p{font-size:1.4rem;display:inline-block;padding:10px;background:rgba(12,12,12,.4);border-radius:10px;color:#fff;float:left;margin-left:20%;text-align:left;font-size:16px;}
.chart-box ul li p svg{width: 2em;height: 2em;}
.chart-box ul li.my-chart span{float:right;text-align:right;}
.chart-box ul li.my-chart p{float:right;margin-right:10%;text-align:left;overflow: hidden;}
.chart-box ul li p::before{content:'';width:0;height:0;border:10px solid transparent;border-bottom:15px solid #999;position:absolute;top:16px;left:21%;}
.chart-box ul li.my-chart p::before{left:82%;}
.chart-send{position:fixed;bottom:0;left:0;width:100%;min-height:46px;}
.chart-send input,.chart-send a{display:inline-block;vertical-align:middle;height:100%;box-sizing: border-box;height: 46px;}
.chart-send input{width:70%;}
.chart-send a{width:15%;text-align:center;border-top:1px solid #999;border-bottom:1px solid #999;background:#35495E;line-height:46px;}
.chart-send a i{line-height:46px;color:#fff;}
.sendInput{padding:0 10px;}
.iconBox{padding: 10px;background: #fff;}
.iconBox .icon{width: 20%;font-size: 26px;display: inline-block;box-sizing:border-box;padding: 2%;height: 1.5em; text-align: center; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
</style>